<template>
   
      <el-aside :width="!counter.off?'200px':'64px'">
        <el-menu :default-active="index" :collapse-transition="false"
                class="el-menu-vertical-demo"
                :collapse="counter.off" :router="true">
        <el-menu-item >
            <template #title>
                <h1>采购后台管理系统</h1>
                </template>
        </el-menu-item>

            <el-menu-item index="/home">
                <i-ep-HomeFilled/>
                <template #title>首页</template>
            </el-menu-item>
            <el-menu-item index="/center">
                <i-ep-Menu/>
                <template #title>个人中心</template>
            </el-menu-item>
            <el-sub-menu index="1">
                <template #title>
                   <i-ep-comment/>
                    <span>新闻管理</span>
                </template>
                    <el-menu-item index="/newsadd">编辑新闻</el-menu-item>
                    <el-menu-item index="/newslist">新闻列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
                <template #title>
                    <i-ep-Avatar/>
                    <span>用户管理</span>
                </template>
                    <el-menu-item index="/useradd">添加用户</el-menu-item>
                    <el-menu-item index="/userlist">用户列表</el-menu-item>
            </el-sub-menu>
        </el-menu>
      </el-aside>
   
</template>

<script setup >
const route = useRoute()
const index = ref()

import { useCounterStore } from '@/stores/counter';
    const counter = useCounterStore()


onBeforeMount(()=>{
    index.value = route.fullpath
})
</script>

<style scoped>
.el-menu{
    border:0;
}
.el-aside{
    height:100vh;
    border-right:1px solid #ccc;
}
</style>
